<template>
  <div class="homepage">
    <div class="homepage_main">
      <div class="card_top">
        <el-card
          :body-style="{ padding: '0px', border: 'none' }"
          style="margin-bottom:10px"
          shadow="never"
        >
          <div class="newstop">
            <span class="newsbox">最新公告</span>
            <marquee class="news" direction="left"
              >{{ title }}:{{ content }}</marquee
            >
            <!-- <span></span> -->
          </div>
        </el-card>
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <!-- <div class="permis">
            <div v-if="permis === '1' ? true : false">
              您已拥有推广的权限!
            </div>
            <div v-else>
              <span>
                对不起!您当前没有推广权限!
              </span>
              <span>
                <el-button type="primary" plain round size="mini"
                  >前往申请</el-button
                >
              </span>
            </div>
          </div> -->
          <div class="showgrade">
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ shop_count }}
              </p>
              <p>当前推广宝贝数量</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ num }}
              </p>
              <p>待审核数量</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ no_num }}
              </p>
              <p>审核被拒数量</p>
            </span>
            <span class="gradeBox">
              <p style="font-size: 20px;font-weight: 600;color: blue;">
                {{ upper_today }}
              </p>
              <p>即将到期</p>
            </span>
          </div>
        </el-card>
        <div class="usermes">
          <el-row
            :gutter="20"
            type="flex"
            justify="space-between"
            style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
          >
            <el-col :span="14" style="padding-left: 0px;">
              <el-card
                :body-style="{ padding: '15px' }"
                style="margin-top:20px"
              >
                <div class="userinfo">
                  <div class="userheadimg">
                    <!-- :src="require('@/assets/images/17-8.png')" -->
                    <el-image
                      style="width: 75px; height: 75px"
                      :src="userimg"
                      fit="cover"
                    ></el-image>
                  </div>
                  <div class="userinforight">
                    <div style="margin-top: 10px;margin-bottom: 15px;">
                      <span style="font-size: 16px;">{{ nickname }}</span>
                    </div>
                    <div style="font-size:16px">
                      <span
                        >申请推广商品:<span
                          style="padding-left:10px;padding-right:10px;margin-left: 0px;"
                          >{{ apply_count }}</span
                        >件</span
                      >
                      <span
                        >申请未通过:<span
                          style="padding-left:10px;padding-right:10px;margin-left: 0px;"
                          >{{ no_apply_count }}</span
                        >件</span
                      >
                    </div>
                    <div style="font-size:16px">
                      <span
                        >申请已通过:<span
                          style="padding-left:10px;padding-right:10px;margin-left: 0px;"
                          >{{ yes_apply_count }}</span
                        >件</span
                      >
                      <span
                        >商品总销量:<span
                          style="padding-left:10px;padding-right:10px;margin-left: 0px;"
                          >{{ all_count }}</span
                        >件</span
                      >
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="10" style="padding-right: 0px;">
              <el-card
                :body-style="{ padding: '15px' }"
                style="margin-top:20px"
              >
                <div>
                  <div
                    style="text-align:left;font-size: 17px;font-weight: 600;"
                  >
                    本月月报
                  </div>
                  <div class="monthly">
                    <div class="monthly_left">
                      <div style="font-size: 15px;font-weight: 600;">
                        {{ ranking }}
                      </div>
                      <div>本月排名</div>
                    </div>
                    <div class="monthly_left">
                      <div style="font-size: 15px;font-weight: 600;">
                        {{ day_num }}
                      </div>
                      <div>本月推广数量</div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="salesBox">
          <el-card :body-style="{ padding: '15px' }" style="margin-top:20px">
            <div class="sales_data">
              <div class="sales_today">
                <div class="line">今日商品销量</div>
                <div style="margin-top:13px">{{ todaynum }}</div>
              </div>
              <div class="sales_yesterady">
                <div class="line">昨日商品销量</div>
                <div style="margin-top:13px">{{ yesterdaynum }}</div>
              </div>
              <div class="sales_month">
                <div class="line">当月商品销量</div>
                <div style="margin-top:13px">{{ daynum }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="personlist">
        <div class="personBox">
          <el-card :body-style="{ padding: '15px' }" style="margin-top:20px">
            <div slot="header" class="clearfix" style="text-align:left">
              <span style="font-size:20px;font-weight: 600;">个人榜单</span>
            </div>
            <div class="person_info">
              <el-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
              >
                <el-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div
                      style="font-size: 18px;font-weight: 600;margin-bottom: 15px;"
                    >
                      {{ shop_count }}
                    </div>
                    <div>在线商品数</div>
                  </div>
                </el-col>
                <el-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div
                      style="font-size: 18px;font-weight: 600;margin-bottom: 15px;"
                    >
                      {{ todaynum }}
                    </div>
                    <div>今日出单量</div>
                  </div>
                </el-col>
                <el-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div
                      style="font-size: 18px;font-weight: 600;margin-bottom: 15px;"
                    >
                      {{ today_num }}
                    </div>
                    <div>近两个小时销量</div>
                  </div>
                </el-col>
                <el-col :span="6" style="padding-left: 0px;">
                  <div>
                    <div
                      style="font-size: 18px;font-weight: 600;margin-bottom: 15px;"
                    >
                      {{ coupon_num }}
                    </div>
                    <div>领劵量</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div
              style="overflow:hidden;height: 1px;width: 100%;margin: 19px 0;background-color: #DCDFE6;border:0px"
            ></div>
            <div class="person_main">
              <el-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="margin-left:0px; margin-right: 0px; width: 100%;margin:0 auto"
              >
                <el-col :span="12" style="padding-left: 0px;">
                  <div class="main_left">
                    <div
                      style="border-left: 3px solid rgb(252, 66, 51);padding-left: 25px;font-weight: 600;"
                    >
                      佣金变动商品
                    </div>
                    <div>
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        v-loading="loading"
                      >
                        <el-table-column type="index" label="排名" width="70">
                        </el-table-column>
                        <el-table-column prop="goods_short_title" label="宝贝">
                        </el-table-column>
                        <el-table-column prop="service_rate" label="服务费">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </el-col>

                <el-col :span="12" style="padding-left: 0px;">
                  <div class="main_right">
                    <div
                      style="border-left: 3px solid rgb(63, 127, 253);padding-left: 25px;font-weight: 600;"
                    >
                      近2个小时排行榜销量
                    </div>
                    <div>
                      <el-table
                        :data="twohourdata"
                        style="width: 100%"
                        v-loading="loading"
                      >
                        <el-table-column type="index" label="排名" width="70">
                        </el-table-column>
                        <el-table-column prop="goods_img" label="主图">
                          <template slot-scope="scope">
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="scope.row.goods_img"
                              fit="cover"
                            ></el-image>
                          </template>
                        </el-table-column>
                        <el-table-column prop="goods_short_title" label="宝贝">
                        </el-table-column>
                        <el-table-column prop="two_hour_num" label="出单量">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getUser } from "@/utils/auth";
import { getPersonGoods } from "@/api/userinfo/userinfo";
import { getNewNotice } from "@/api/notice/notice";
export default {
  name: "homepage",
  data() {
    return {
      loading: true,
      title: "",
      content: "",
      userimg: "",
      nickname: "",
      permis: "",
      tableData: [
        // {
        //   id: "2",
        //   service_rate: "",
        //   goods_short_title: "王小虎"
        // }
      ],
      twohourdata: [
        // {
        //   id: "2",
        //   goods_img: "",
        //   goods_short_title: "王小虎",
        //   two_hour_num: "上海"
        // }
      ],
      shop_count: "", //当前商品在线的数量
      num: "", //待审核数量
      no_num: "", //审核被拒数量
      upper_today: "", //即将到期的商品数量
      todaynum: "", //今日商品销量
      yesterdaynum: "", //昨日商品销量
      daynum: "", //本月商品销量
      apply_count: "", //申请推广商品数量
      no_apply_count: "", //申请未通过
      yes_apply_count: "", //申请已通过
      all_count: "", //商品总销量
      ranking: "", //本月排名
      day_num: "", //本月推广商品数量
      coupon_num: "", //领卷量
      today_num: "" // 进两小时销量
    };
  },

  computed: {},
  created() {
    this.permis = this.$ls.get("usertype");
    console.log("getuser", this.$ls.get("userinfo"));
    if (this.$ls.get("userinfo").nickname) {
      this.nickname = this.$ls.get("userinfo").nickname;
    }
    this.userimg = this.$ls.get("userinfo").img;
    this.getPersonGoods();
    this.getNewNotice();
  },
  mounted() {},
  methods: {
    getNewNotice() {
      getNewNotice()
        .then(res => {
          console.log("公告", res.data);
          this.title = res.data.title;
          this.content = res.data.content;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getPersonGoods() {
      this.loading = true;
      getPersonGoods()
        .then(res => {
          this.loading = false;
          console.log("个人商品统计", res.data);
          this.shop_count = res.data.shop_count;
          this.num = res.data.num;
          this.no_num = res.data.no_num;
          this.upper_today = res.data.upper_today;
          this.apply_count = res.data.apply_count;
          this.no_apply_count = res.data.no_apply_count;
          this.yes_apply_count = res.data.yes_apply_count;
          this.all_count = res.data.all_count;
          this.shop_count = res.data.shop_count;
          this.ranking = res.data.ranking;
          this.day_num = res.data.day_num;
          this.coupon_num = res.data.coupon_num;
          this.today_num = res.data.today_num;
          this.todaynum = res.data.all_num.today;
          this.yesterdaynum = res.data.all_num.yesterday;
          this.daynum = res.data.all_num.day;
          this.tableData = res.data.commission_change_list;
          this.twohourdata = res.data.two_time_goods;
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.homepage {
  // width: 970px;
  box-sizing: border-box;
  .homepage_main {
    // width: 970px;
    .newstop {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 60px;
      line-height: 60px;
      // padding: 10px;
      text-align: left;
      .newsbox {
        display: inline-block;
        background-color: #fc4233;
        color: #ffffff;
        border-radius: 8px;
        padding: 0px 20px;
        margin-right: 30px;
        margin-left: 20px;
        width: 70px;
        height: 40px;
        line-height: 40px;
      }
      .news {
        display: inline-block;
        width: 98%;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        // background-color: #000;
      }
    }
    .permis {
      padding: 10px 0;
    }
    .showgrade {
      height: 103px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .gradeBox {
        padding: 20px;
      }
    }
    .usermes {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userinfo {
        width: 100%;
        height: 88px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        .userinforight {
          span {
            margin-left: 15px;
          }
        }
        .userheadimg {
          width: 75px;
          height: 75px;
          margin-top: 5px;
          margin-right: 10px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .monthly {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .salesBox {
      .sales_data {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .sales_today {
          padding: 20px;
          background-color: rgb(255, 175, 61);
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
        }
        .sales_yesterady {
          padding: 20px;
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
          background-color: #2ad1a8;
        }
        .sales_month {
          padding: 20px;
          color: rgb(255, 255, 255);
          width: 250px;
          height: 60px;
          border-radius: 10px;
          background-color: #3f7ffd;
        }
        .line {
          border-left: 3px solid rgb(255, 255, 255);
          padding-left: 25px;
          text-align: left;
          font-weight: 600;
        }
      }
    }
    .personlist {
      .personBox {
        .person_info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-bottom: 20px;
          padding: 15px;
        }
        .person_main::v-deep {
          text-align: left;
          .cell {
            text-align: center;
          }
          // .main_left {
          //   width: 100%;
          // }
          // .main_right {
          //   width: 100%;
          // }
        }
      }
    }
  }
}
</style>
